/** */

<template>
  <div>
    <h1>using value</h1>
    <MyInput4 :value="v1" @change="handleV1Change" />
    <h1>using vModel</h1>
    <MyInput4 v-model="v1" />
    <div>v1: {{ v1 }}</div>
    <h1>FCControl</h1>
    <Control3
      :type="control_1"
      :props="controlProps_1"
      :events="controlEvents_1"
    />
    <div>props_1: {{ this.controlProps_1.value }}</div>
    <Control3 :value="v1" />
    <button @click="updateV1">update v1</button>
    <h1>using form</h1>
    <div>values: {{ form.getFieldsValue() }}</div>
    <a-form :form="form">
      <a-form-item label="v11">
        <MyInput4
          v-decorator="[
            'a',
            {
              rules: [{ required: true, message: 'Please select your a!' }],
              initialValue: 11,
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="bbb">
        <Control3
          v-decorator="[
            'b',
            {
              rules: [{ required: true, message: 'Please select your a!' }],
              initialValue: 33,
            },
          ]"
          :type="controlBType"
          :props="controlBProps"
          :events="controlBEvents"
        />
      </a-form-item>
    </a-form>
    <div>
      <button @click="updateForm">update form</button>
    </div>
  </div>
</template>

<script>
import MyInput4 from './control/MyInput4.vue'
import Control3 from './control/Control3.vue'

export default {
  name: 'myIndex2',
  components: {
    MyInput4,
    Control3,
  },
  data() {
    return {
      v1: 'init v1',
      form: this.$form.createForm(this),
      controlBType: 'input4',
      controlBProps: {
        // allowClear: true,
        placeholder: 'sdfsfdfsdssd',
      },
      controlBEvents: {
        change: this.handleControlBChange,
      },

      control_1: 'input',
      controlProps_1: {
        value: 'init value',
      },
      controlEvents_1: {
        change: (value) => {
          this.controlProps_1.value = value
          // console.log('in events, value:', value)
        },
      },
    }
  },
  methods: {
    handleV1Change(value) {
      this.v1 = value
    },
    updateV1() {
      this.v1 = 'update v1'
    },
    updateForm() {
      this.form.setFieldsValue({ a: 1, b: 2 })
    },
    handleControlBChange(value) {
      console.log('now handle control b chang:', value)
    },
  },
}
</script>

<style></style>
